<template>
  <div id="radarmain" style="height: 700px">
    <div id="input" style="height: 50%; float: left; margin: 20px; margin-top: 100px">
      <el-form ref="dataForm" :model="valueWeight" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="顾客满意度" prop="storeName">
          <el-input v-model="valueWeight.customerSatisfy" type="number" />
        </el-form-item>
        <el-form-item label="利润" prop="storeLocation">
          <el-input v-model="valueWeight.profit" type="number" />
        </el-form-item>
        <el-form-item label="营业额" prop="goodName">
          <el-input v-model="valueWeight.sale" type="number" />
        </el-form-item>
        <el-form-item label="销售量" prop="goodType">
          <el-input v-model="valueWeight.salesVolume" type="number" />
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" style="margin-left: 300px" @click="updateradar">修改雷达图数据</el-button>
      </div>
    </div>
    <div id="container" style="height: 450px; width: 500px; float: left; margin: 20px; margin-top: 50px; margin-left: 100px"></div>
  </div>
</template>

<script>
import echarts from '../value/echarts.min.js'
import axios from 'axios'
import request from '@/utils/request'
export default {
  name: 'GetValueWeight',
  data() {
    return {
      storeId: '',
      storeName: '',
      storeLocation: '',
      valueWeight: {
        customerSatisfy: 0,
        profit: 0,
        sale: 0,
        salesVolume: 0
      },
      myChart: null,
      app: {},
      option: {
        title: {
          text: '门店价值雷达图'
        },
        tooltip: {},
        legend: {
          data: ['门店价值指标']
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: '用户满意度', max: 100 },
            { name: '利润', max: 100 },
            { name: '营业额', max: 100 },
            { name: '销售量', max: 100 }
          ]
        },
        series: [{
          name: '门店价值',
          type: 'radar',
          areaStyle: { normal: {}},
          data: [
            {
              value: [],
              name: '门店价值指标'
            }
          ]
        }]
      }
    }
  },
  mounted() {
    this.vueinit()
  },
  methods: {
    vueinit() {
      this.storeId = JSON.parse(sessionStorage.getItem('store')).storeId
      this.storeName = JSON.parse(sessionStorage.getItem('store')).storeName
      this.storeLocation = JSON.parse(sessionStorage.getItem('store')).location

      // const storeValueWeight = {
      //   customerSatisfy: 85,
      //   profit: 65,
      //   sale: 56,
      //   salesVolume: 75
      // }

      request.get('/StoreValue/getByStoreId/' + this.storeId).then(request=>{
        var Data=request.data.data
        this.$message.success('获取数据成功！')
        this.valueWeight.customerSatisfy = Data.customer_satisfy_weight
        this.valueWeight.profit = Data.profit_weight
        this.valueWeight.sale = Data.sale_weight
        this.valueWeight.salesVolume = Data.sales_volume_weight

        const dom = document.getElementById('container')
        this.myChart = echarts.init(dom)
        // console.log(this.myChart)
        // this.valueWeight = storeValueWeight
        const array = [this.valueWeight.customerSatisfy,
          this.valueWeight.profit,
          this.valueWeight.sale,
          this.valueWeight.salesVolume]
        this.option.series[0].data[0].value = array
        if (this.option && typeof this.option === 'object') {
          this.myChart.setOption(this.option, true)
        }
      }).catch(()=>{
          this.$message.error('服务出错，请联系管理员！')
          return
      })
    },
    updateradar() {
      const newarray = [this.valueWeight.customerSatisfy, this.valueWeight.profit,
        this.valueWeight.sale, this.valueWeight.salesVolume]

      for(let i=0;i<4;i++) {
        if(newarray[i]>100||newarray[i]<0) {
          this.$message.warning('权重取值区间为0-100，请重新输入')
          return
        }
      }

      const valueDao = {
        store_id: this.storeId,
        customer_satisfy_weight: parseInt(newarray[0]),
        profit_weight: parseInt(newarray[1]),
        sale_weight: parseInt(newarray[2]),
        sales_volume_weight: parseInt(newarray[3])
      }
      request.post('/StoreValue/update/', valueDao).then(request=>{
        var data = request.data
        if(data.code === 200) {
          this.$message.success(data.message)
          this.option.series[0].data[0].value = newarray
          if (this.option && typeof this.option === 'object') {
          this.myChart.setOption(this.option, true)
          }
        }
        else {
          this.$message.error(data.message)
        }
      }).catch(()=>{
        this.$message.error('更新数据出错，请联系管理员！')
        return
      })
    }
  }
}
</script>

<style scoped>

</style>
